<template>
  <div class="login">
    <div class="center">
      <div class="company">
        <img src="/logo.ico" class="logo">
        <div class="name">顶新报障平台</div>
      </div>
      <div class="title">登录</div>
      <el-input v-model="input.account" class="account" placeholder="账号" :prefix-icon="User" />
      <el-input v-model="input.password" class="password" placeholder="密码" :prefix-icon="Lock" />
      <el-checkbox class="remember" v-model="input.remember" label="记住密码" size="large" />
      <el-button type="primary" class="btn" @click="login">登录</el-button>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { showTip } from '@/utils';
import { User, Lock } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter()
/**用户的输入数据 */
interface user {
  /**账号 */
  account: string,
  /**密码 */
  password: string
  /**是否记住密码 */
  remember: boolean
}
/**用户的输入数据 */
const input = reactive<user>({
  account: '',
  password: '',
  remember: false
})

onMounted(() => {
  const loacl = localStorage.getItem('password') || ''
  if (loacl) {
    const data: user = JSON.parse(loacl)
    input.account = data.account
    input.password = data.password
    input.remember = data.remember
  }
})
/**登录按钮 */
const login = async () => {
  console.log(input);
  await router.push('/registration')
  showTip('登录成功')
}
</script>
<style lang='less' scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f3f7;

  .center {
    display: flex;
    flex-direction: column;
    align-items: center;

    .company {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;

      .logo {
        width: 44px;
        height: 38px;
      }

      .name {
        font-size: 30px;
        margin-left: 15px;
      }
    }

    .title {
      margin: 35px 0;
      font-size: 20px;
    }

    .password {
      width: 320px;
      margin: 12px 0;
      margin-bottom: 6px;
    }

    .remember {
      align-self: self-start;
    }

    .btn {
      margin-top: 6px;
      width: 100%;
    }
  }
}
</style>
